window.onload=function(){
  const { innerWidth, innerHeight } = window;
  /**********************创建空间场景******************************** */
  // 实例化场景
  const scene= new THREE.Scene();
  // 创建相机实例
  const camera= new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000 );
  // 创建渲染器实例
  const renderer= new THREE.WebGLRenderer();
  // 设置一个渲染器的尺寸
  renderer.setSize(innerWidth, innerHeight);
  // 将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。
  document.body.appendChild(renderer.domElement);

  /*******************创建实物*****************************************/
  
   // 实例化立方体
   const geometry= new THREE.BoxGeometry();
  //实例化材质
   const material= new THREE.MeshBasicMaterial({
     color:0x00ff00,
    //  wireframe:true,
     wireframeLinejoin:'miter'
    });
  //实例化网格Mesh  
   const cube=new THREE.Mesh(geometry,material);
   //  将网格实例m,添加到场景中，物体将会被添加到(0,0,0)坐标
   scene.add(cube);
  // 移动摄像机的位置，防止立方体和摄像机在一起。
   camera.position.z=5;

  /*******************渲染场景****************************************/
  // 渲染循环-render loop ; 动画循环 animate loop 
  function animate(){
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 渲染场景
    renderer.render(scene,camera)
  }
  animate();


}